<template>
	<div class="CountList">
		<el-header height="100px">
			<div class="search">
				<div class="SearchInput">
					<span>{{inputTitle1}}：</span>
			    	<el-input v-model="searchKey1" :placeholder="'输入'+inputTitle1"></el-input>
				</div>
				<div class="SearchInput">
					<span>{{inputTitle2}}：</span>
			    	<el-input v-model="searchKey2" :placeholder="'输入'+inputTitle2"></el-input>
				</div>
				<div class="SearchInput">
					<span>{{inputTitle3}}：</span>
			    	<el-input v-model="searchKey3" :placeholder="'输入'+inputTitle3"></el-input>
				</div>
				<div class="btn">
					<el-button type="primary" :round="false" icon="el-icon-search" @click="">查询</el-button>
				</div>
			</div>
		</el-header>
		<BaseTableList 
		:tableTitle="tableTitle"
		:tableData="tableList"
		:fn2="fn2"
		></BaseTableList>
	</div>
</template>
<script>
	import BaseTableList from '@/components/base-TableList.vue'

	export default {
		components:{
			BaseTableList
		},
		props: {
			inputTitle1: [String],
			inputTitle2: [String],
			inputTitle3: [String],
			tableList: {
				type: Array,
				default: () => []
			},
			tableTitle: {
				type: Array,
				default: () => []
			},
			fn2: [Function],
		},
		data() {
			return {
				searchKey1: '',
				searchKey2: '',
				searchKey3: '',
			}
		}
	}
</script>
<style>
	.CountList .el-header {
		display: flex;
		align-items: center;
	}
	.CountList .SearchInput {
		display: inline-block;
		margin-right: 20px;
	}
	.CountList .search .btn {
		display: inline-block;
	}
	.CountList .SearchInput .el-input {
		width: 200px;
		height: 45px;
	}
</style>